<template>
    <div id="container">
        <my-header></my-header>
        <el-main id="main">
            <!-- 标题 -->
            <div id="title">
                项目
                <el-button type="primary" round icon="el-icon-plus" id="new-button" size="normal" @click="handleNewProject">新建项目</el-button>
            </div>
            <!-- 分割线 -->
            <!-- <el-divider></el-divider> -->

              <el-tabs v-model="activeTab">
                <!-- 我创建的项目标签页 -->
                <el-tab-pane label="我创建的项目" name="self">
                      <el-table
                        :data="myProjectList.filter(data => !searchMyProject || data.name.toLowerCase().includes(searchMyProject.toLowerCase()))"
                        style="width: 100%">
                        <el-table-column
                            label="项目标识ID"
                            prop="id">
                        </el-table-column>
                        <el-table-column
                            label="项目名称"
                            prop="name"
                            width="250px">
                            <template slot-scope="scope">
                                <div id="project-name-box">
                                    <span id="enterprise-tag" v-if="scope.row.enterpriseProject"></span>
                                    <span :class="scope.row.enterpriseProject ? 'enterprise' : 'no-enterprise'">{{scope.row.name}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="所属课程"
                            prop="course">
                        </el-table-column>
                        <el-table-column
                            label="项目状态"
                            prop="stauts">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="!scope.row.isFinished">进行中</el-tag>
                                <el-tag type="danger" v-else>已结束</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="right"
                            width="300px">
                            <template slot="header" slot-scope="scope">
                                <el-input
                                v-model="searchMyProject"
                                size="mini"
                                placeholder="输入关键字搜索"
                                id="search-myProject-input"/>
                            </template>
                            <template slot-scope="scope">
                                <el-button
                                size="mini"
                                type="success"
                                @click="handleEnterProject(scope.$index, scope.row)">进入项目主页</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- 我参与的项目标签页 -->
                <el-tab-pane label="我参与的项目" name="other">
                      <el-table
                        :data="otherProjectList.filter(data => !searchOtherProject || data.name.toLowerCase().includes(searchOtherProject.toLowerCase()))"
                        style="width: 100%">
                        <el-table-column
                            label="项目标识ID"
                            prop="id">
                        </el-table-column>
                        <el-table-column
                            label="项目名称"
                            prop="name"
                            width="250px">
                            <template slot-scope="scope">
                                <div id="project-name-box">
                                    <span id="enterprise-tag" v-if="scope.row.enterpriseProject"></span>
                                    <span :class="scope.row.enterpriseProject ? 'enterprise' : 'no-enterprise'">{{scope.row.name}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="所属课程"
                            prop="course">
                        </el-table-column>
                        <el-table-column
                            label="项目状态"
                            prop="stauts">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="!scope.row.isFinished">进行中</el-tag>
                                <el-tag type="danger" v-else>已结束</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="right"
                            width="300px">
                            <template slot="header" slot-scope="scope">
                                <el-input
                                v-model="searchOtherProject"
                                size="mini"
                                placeholder="输入关键字搜索"
                                id="search-otherProject-input"/>
                            </template>
                            <template slot-scope="scope">
                                <el-button
                                size="mini"
                                type="success"
                                @click="handleEnterProject(scope.$index, scope.row)">进入项目主页</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-main>
        <!-- 新建项目模态框 -->

        <el-dialog title="新建项目" :visible.sync="newFormVisible">
            <el-form :model="newForm" :rules="newRules" ref="newForm">
                <el-form-item label="项目名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="newForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目起止时间" :label-width="formLabelWidth" prop="time">
                        <el-date-picker
                            v-model="newForm.time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="所属课程" :label-width="formLabelWidth" prop="course">
                    <el-input v-model="newForm.course" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目描述" :label-width="formLabelWidth" prop="desc">
                    <el-input type="textarea" v-model="newForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="标签" :label-width="formLabelWidth" prop="tags">
                    <el-input v-model="newForm.tags" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="newFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmitNew">新建项目</el-button>
            </div>
        </el-dialog>
        <my-footer></my-footer>
    </div>
</template>

<script>
import MyFooter from '../../components/MyFooter.vue';
import MyHeader from '../../components/MyHeader.vue'
import axios from 'axios';
export default {
    name:'Project',
    data:function(){
        return{
            activeTab: 'self',
            // 我创建的项目
            myProjectList:[],
            otherProjectList:[],
            searchMyProject:'',
            searchOtherProject:'',
            // 创建项目信息
            newForm: {
                name: '',
                time:'',
                course:'',
                desc:'',
                tags:''
            },
            formLabelWidth: '120px',
            newFormVisible:false,
            newRules:{
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                ],
                time:[
                    { required: true, message: '请选择项目起止时间', trigger: 'blur' }
                ],
                desc:[
                    { required: true, message: '请输入项目描述', trigger: 'blur' },
                    { min: 3, max: 500, message: '长度在 3 到 500 个字符', trigger: 'blur' }
                ],
                course:[
                    { required: true, message: '请输入所属课程', trigger: 'blur' },
                    { min: 2, max: 500, message: '长度在 2 到 500 个字符', trigger: 'blur' }
                ],
                tags:[
                    { required: true, message: '请输入所属标签，用空格分开', trigger: 'blur' },
                    { min: 2, max: 500, message: '长度在 2 到 500 个字符', trigger: 'blur' }
                ]
            },
            // 文件上传
            fileList:[]
        }
    },
    computed:{
        
    },
    mounted:function(){
        this.getMyProject();
        this.getOtherProject();
    },
    methods:{
        handleEnterProject:function(index,row){
            this.$router.push({ path: 'project_detail/root',query:{'project_id':row.id} });
        },
        handleNewProject:function(index,row){
            this.newFormVisible = true;
        },
        handleSubmitNew:function(){
            this.$refs.newForm.validate(async (valid) => {
                if(!valid) {
                    this.$message.error("信息为填写完整或未按要求填写，请根据红色文字提示修改后再进行提交！");
                    return;
                }
                let start_time = new Date(this.newForm.time[0]); 
                start_time=start_time.getFullYear() + '-' + (start_time.getMonth() + 1) + '-' + start_time.getDate(); 
                let end_time = new Date(this.newForm.time[1]); 
                end_time=end_time.getFullYear() + '-' + (end_time.getMonth() + 1) + '-' + end_time.getDate(); 
                // end_time=end_time.getFullYear() + (end_time.getMonth() + 1) + end_time.getDate(); 
                let post_data = {
                    name:this.newForm.name,
                    tags:this.newForm.tags,
                    desc:this.newForm.desc,
                    start_time:start_time,
                    end_time:end_time,
                    course:this.newForm.course,
                    uid:this.$store.state.login.uid,
                    username:this.$store.state.login.username,
                    type:this.$store.state.login.type
                }
                //console.log(post_data);
                const headerConfig = { headers:
                  { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
                };
                try{
                  const res = await axios.post('/api/project/new_project',post_data,headerConfig);
                  if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                  if(res.data.res.ok === 1){
                        this.$notify({
                            title: '成功',
                            message: res.data.res.msg,
                            type: 'success'
                        });
                    }else{
                        this.$notify({
                            title: '提示',
                            message: res.data.res.msg,
                            type: 'error'
                        });
                    }
                }catch(e){
                    console.log(e);
                    this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
                }
            })
            this.newFormVisible = false;
        },
        getMyProject:async function(){
            this.myProjectList = [];
            let post_data = {
                uid:this.$store.state.login.uid
            };
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            try{
                const res = await axios.post('/api/project/my_project',post_data,headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.myProjectList = res.data.res.data;
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            }
        },
        getOtherProject:async function(){
            this.otherProjectList = [];
            let post_data = {
                uid:this.$store.state.login.uid
            };
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            try{
                const res = await axios.post('/api/project/other_project',post_data,headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.otherProjectList = res.data.res.data;
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            }
        }
    },
    components:{
        MyHeader,
        MyFooter
    }
}
</script>

<style lang="scss" scoped>
#container{
    width: 100%;
    background-color: #eee;
    min-width: 950px;
    #main{
        width:70%;
        min-height: 700px;
        margin-left: 15%;
        margin-right: 15%;
        margin-top:30px;
        margin-bottom:30px;
        background-color: #fff;
        box-sizing: border-box;
        padding:50px;
        #title{
            font-size: 28px;
            font-weight: bold;
            position: relative;
            #new-button{
                float: right;
            }
        }
        /deep/ .el-divider{
            margin: 20px;
            margin-left: 0;
            margin-right: 0;
        }
        #info_form{
            margin-top:20px;
        }
    }
}
/deep/ .el-input__inner{
    width:30%;
}
/deep/ .el-tabs__nav-scroll{
    padding-top:20px;
    overflow: auto;
}
/deep/ #search-myProject-input{
    width:100%;
}
/deep/ #search-otherProject-input{
    width:100%;
}
/deep/ .el-dialog .el-input__inner{
    width:100%;
}
/deep/ .read {
    background: #f0f9eb;
    color: gray;
}
#enterprise-tag{
    display: inline-block;
    width:20px;
    height:20px;
    background-image: url("~@/assets/icons/qiye.png");
    background-size:20px 20px;
    background-repeat:no-repeat;
    background-position:top center;
    background-color: transparent;
}
.enterprise{
    color:#F56C6C;
}
</style>